module.exports = {
  purge: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    screens: {
      sm: "640px",
      // => @media (min-width: 640px) { ... }

      md: "768px",
      // => @media (min-width: 768px) { ... }

      lg: "1024px",
      // => @media (min-width: 1024px) { ... }

      xl: "1280px",
      // => @media (min-width: 1280px) { ... }

      "2xl": "1536px",
      // => @media (min-width: 1536px) { ... }

      tablet: "640px",
      // => @media (min-width: 640px) { ... }

      laptop: "1024px",
      // => @media (min-width: 1024px) { ... }

      desktop: "1280px",
      // => @media (min-width: 1280px) { ... }

      "2k": "1920px",

      "3k": "2560px",

      "4k": "3800px",
    },
    fontSize: {
      xxs: "0.6rem",
      xs: ".75rem",
      sm: ".875rem",
      base: "1rem",
      lg: "1.125rem",
      xl: "1.25rem",
      "2xl": "1.5rem",
      "3xl": "1.875rem",
      "4xl": "2.25rem",
      "5xl": "3rem",
      "6xl": "4rem",
      "7xl": "5rem",
    },
    extend: {
      colors: {
        myblue: {
          DEFAULT: "#22D1E0",
          700: "#0091A7",
          800: "#2A596C",
          900: "#214C5D",
        },
      },
      width: {
        // 96: '24rem',
        104: "26rem",
        120: "30rem",
        128: "32rem",
        144: "36rem",
        192: "48rem",
        "4k": "3840px",
        "28/100": "28%",
      },
      spacing: {
        "28/100": "28%",
      },
      maxHeight: {
        "1/3": "33.333333333%",
      },
      minHeight: {
        "1/3": "33.333333333%",
        "md": "32rem"
      },
      transitionDuration: {
        '0': '0ms',
        '2000': '2000ms',
       }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require("@tailwindcss/aspect-ratio"),
    require("@tailwindcss/forms"),
  ],
};
